<template>
  <div>
    <el-container class="app-container">
      <!-- 导航栏 -->
      <el-aside class="container-aside" style="width:180px;">
        <el-row>
          <el-col :span="24">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              background-color="#304156"
              text-color="#fff"
            >
              <!-- 1.首页-->
              <router-link to="/home">
                <el-menu-item index="1">
                  <template slot="title">
                    <i class="el-icon-s-home"></i>
                    <span>首页</span>
                  </template>
                </el-menu-item>
              </router-link>
              <!-- 2.商品 -->
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-s-goods"></i>
                  <span>商品</span>
                </template>
                <el-menu-item-group>
                  <router-link to="/prolist">
                    <el-menu-item index="2-1" class="item-indent">商品列表</el-menu-item>
                  </router-link>
                  <router-link to="/addProduct">
                    <el-menu-item index="2-2" class="item-indent">添加商品</el-menu-item>
                  </router-link>
                  <router-link to="/goodType">
                    <el-menu-item index="2-3" class="item-indent">商品分类</el-menu-item>
                  </router-link>
                  <router-link to="/productMain">
                    <el-menu-item index="2-4" class="item-indent">商品类型</el-menu-item>
                  </router-link>
                  <router-link to="/brands">
                    <el-menu-item index="2-5" class="item-indent">品牌管理</el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-submenu>
              <!-- 3.订单 -->
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-s-order"></i>
                  <span>订单</span>
                </template>
                <el-menu-item-group>
                  <router-link to="/orderlist">
                    <el-menu-item index="3-1" class="item-indent">订单列表</el-menu-item>
                  </router-link>  
                  <router-link to="/orderset">
                    <el-menu-item index="3-2" class="item-indent">订单设置</el-menu-item>
                  </router-link>
                  <router-link to="/reApplyHandle">
                    <el-menu-item index="3-3" class="item-indent">退货申请处理</el-menu-item>
                  </router-link>
                  <router-link to="/Returnreasonset">
                    <el-menu-item index="3-4" class="item-indent">退货原因设置</el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-submenu>
              <!-- 4.营销 -->
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-s-shop"></i>
                  <span>营销</span>
                </template>
                <el-menu-item-group>
                  <template slot="title" class="hide-slot">分组一</template>
                  <router-link to="/spike">
                    <el-menu-item index="4-1" class="item-indent">秒杀活动列表</el-menu-item>
                  </router-link>
                  <router-link to="/coupon">
                    <el-menu-item index="4-2" class="item-indent">优惠券列表</el-menu-item>
                  </router-link>
                  <router-link to="/brand">
                    <el-menu-item index="4-3" class="item-indent">品牌推荐</el-menu-item>
                  </router-link>
                  <router-link to="/product">
                    <el-menu-item index="4-4" class="item-indent">新品推荐</el-menu-item>
                  </router-link>
                  <router-link to="/popularity">
                    <el-menu-item index="4-5" class="item-indent">人气推荐</el-menu-item>
                  </router-link>
                  <router-link to="/subject">
                    <el-menu-item index="4-6" class="item-indent">专题推荐</el-menu-item>
                  </router-link>
                  <router-link to="/advertising">
                    <router-link to="/"></router-link>
                    <el-menu-item index="4-7" class="item-indent">广告列表</el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-submenu>
              <!-- 5.权限-->
              <el-submenu index="5">
                <template slot="title">
                  <i class="el-icon-setting"></i>
                  <span>权限</span>
                </template>
                <el-menu-item-group>
                  <router-link to="/user">
                    <el-menu-item index="5-1" class="item-indent">用户列表</el-menu-item>
                  </router-link>
                  <router-link to="/role">
                    <el-menu-item index="5-2" class="item-indent">角色列表</el-menu-item>
                  </router-link>
                  <router-link to="/menu">
                    <el-menu-item index="5-3" class="item-indent">菜单列表</el-menu-item>
                  </router-link>
                  <router-link to="/Permissionlist">
                    <el-menu-item index="5-4" class="item-indent">资源列表</el-menu-item>
                  </router-link>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-main class="container-main">
        <!-- 插槽 -->
        <slot name="mains"></slot>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Common",
  props: {
    msg: String,
  },
  data() {
    return { tokenStr: window.sessionStorage.getItem("token") };
  },
};
</script>
<style>
body,
html,
#app,
.app-container {
  height: 100%;
}

/*container-aside */
.container-aside {
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #304156;
  overflow: hidden;
}
.item-indent {
  min-width: 180px !important;
  padding: 0 0 0 60px !important;
  background: #1f2d3d !important;
}
.item-indent:hover {
  background: black !important;
}
.el-menu-item-group__title {
  display: none !important;
}

/*container-main*/
.container-main {
  padding: 0px;
  margin-left: 180px;
}
</style>
